<template>
  <div>
    <van-tabs v-model:active="active">
      <van-tab v-for="(v, i) in titles" :key="i" :title="v.title">
        <ListItem v-for="v in list" :key="v.id" :v="v" @click="$router.push(`/detail/${v.id}`)" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'
import ListItem from '@/components/list-item/index.vue'
const titles = ref([])
const active = ref(0)
const list = ref([])
watch(active, () => {
  _getList(titles.value[active.value].id)
})

const _getTitles = async () => {
  const resp = await axios.get('/api/titles')
  titles.value = resp.data.data
  _getList(titles.value[active.value].id)
}

const _getList = async (uid) => {
  const resp = await axios.get('/api/list/classify/' + uid)
  console.log(resp.data.data)
  list.value = resp.data.data
}

_getTitles()
</script>

<style lang="scss" scoped></style>
